<template>
  <div
    class="full"
    style="
      width: 100vw;
      padding: 10px 15px;
      box-sizing: border-box;
      height: 100vh;
      background: #fff;
    "
  >
    <el-page-header @back="dialogs.notice.show = false">
      <template #content>
        <span class="text-large font-600 mr-3"> 公告 </span>
      </template>
    </el-page-header>
    <div class="notice">
      <div class="notice-detail">
        <h2>{{ notice.title }}</h2>
        {{ notice.content }}
        <p>{{ notice.time.slice(0, 10) }}</p>
      </div>
      <div style="width: 400px">
        <el-table :data="gridData" style="width: 700px">
          <el-table-column label="标题" width="170">
            <template #default="scope">
              {{
                scope.row.notice_title.length > 20
                  ? `${scope.row.notice_title.slice(0, 30)}…`
                  : scope.row.notice_title
              }}
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="110">
            <template #default="scope2">
              {{ scope2.row.notice_time.slice(0, 10) }}
            </template>
          </el-table-column>
          <el-table-column label="" width="80">
            <template #default="scope2">
              <el-button
                @click="toDetail(scope2.row)"
                type="primary"
                size="small"
                >查看</el-button
              >
            </template>
          </el-table-column> </el-table
        ><el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import noticeApi from '@/apis/notice.js' //引入接口
const { dialogs } = useDialogsStore() //总的模块管理
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)
const gridData = ref([]) // 定义的一个空数组  让空数组里面有值的话？：将返回值里面的多个对象统一定位于一个数组
const notice = ref({ title: '', content: '', time: '' })
onMounted(() => {
  // 显示对话框
  dialogs.notice.show = true
  // 请求数据
  getData()
})
const goBack = () => {
  console.log('go back')
}
function getData() {
  noticeApi.getNotice(currentPage.value, pageSize.value).then((res) => {
    console.log(res)
    gridData.value = res.result.data
    notice.value.title = gridData.value[0].notice_title
    notice.value.content = gridData.value[0].notice_content
    notice.value.time = gridData.value[0].notice_time
    total.value = res.result.total
  })
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getData()
}
function toDetail(row) {
  notice.value.title = row.notice_title
  notice.value.content = row.notice_content
  notice.value.time = row.notice_time
}
</script>

<style scoped>
.notice {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
}
.notice-detail {
  flex: 1;
  margin: 0px 20px 20px 20px;
  font-size: 16px;
  line-height: 26px;
}
.notice-detail h2 {
  margin: 20px 0;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  color: #444;
}
.notice-detail p {
  margin: 10px 0;
  font-size: 14px;
  text-align: right;
  color: #444;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
